<template>
  <view v-show="!isLoading" class="container">
    <!-- 商品图片轮播 -->
    <SlideImage v-if="!isLoading" :images="goods.goods_images" />
    <!-- 商品信息 -->
    <view v-if="!isLoading" class="goods-info m-top20">
      <!-- 价格、销量 -->
      <view class="info-item info-item__top dis-flex flex-x-between flex-y-end">
        <view class="block-left dis-flex flex-y-center">
          <!-- 商品售价 -->
          <template v-if="userInfo && userInfo.userLevel>1 ">
            <text class="floor-price__samll">￥</text>
            <text class="floor-price">{{ goods.goods_price_min }}</text>
            <!-- 划线价 -->
            <text class="original-price">￥{{ goods.originalPrice }}</text>
          </template>
          <template v-else>
            <text class="floor-price__samll">￥</text>
            <text class="floor-price">{{ goods.originalPrice }}</text>
          </template>
        </view>
      </view>
      <!-- 标题、分享 -->
      <view class="info-item info-item__name dis-flex flex-y-center">
        <view class="goods-name flex-box">
          <text class="twoline-hide">{{ goods.goods_name }}</text>
        </view>
      </view>
    </view>
    <!-- 选择商品规格 -->
    <view  class="goods-choice m-top20 b-f" >
      <view class="spec-list" @click="onShowSkuPopup(3)">
        <view class="flex-box">
          <text class="col-8">选择</text>
          <text class="spec-name" v-for="(item, index) in goods.specList" :key="index">{{ item.name }}</text>
        </view>
        <view class="f-26 col-9 t-r">
          <uni-icons type="right" size="22"></uni-icons>
        </view>
      </view>
      <view class="spec-list">
        <view class="flex-box">
          <text class="col-8">服务</text>
          <text class="spec-name" >免运费·平台保障·优先发货</text>
        </view>
      </view>
      <view class="spec-list">
        <view class="flex-box">
          <text class="col-8">运费</text>
          <text class="spec-name" >免运费</text>
        </view>
      </view>
    </view>

    <!-- 商品SKU弹窗 -->
    <SkuPopup v-if="!isLoading" v-model="showSkuPopup" :skuMode="skuMode" :goods="goods"  />
    <!-- 商品描述 -->
    <view v-if="!isLoading" class="goods-content m-top20">
      <view class="item-title b-f">
        <text>---- 商品描述 ----</text>
      </view>
      <block v-if="goods.content != ''">
        <view class="goods-content__detail b-f">
          <view v-html="goods.content"></view>
        </view>
      </block>
      <empty v-else tips="亲，暂无商品描述" />
    </view>

    <!-- 底部选项卡 -->
    <view class="footer-fixed">
      <view class="footer-container">
        <!-- 操作按钮 -->
        <view class="foo-item-btn">
          <view class="btn-wrapper">
            <view class="btn-item btn-item-main" @click="onShowSkuPopup(2)">
              <image :src="$Config.get('imageUrl')+'/order/cart.png'"  class="image"/>
              <text>加入购物车</text>
            </view>
            <view class="btn-item btn-item-main" @click="onShowSkuPopup(3)">
              <text>立即采购</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import SlideImage from './components/SlideImage'
import SkuPopup from './components/SkuPopup'
import {getUserInfo} from '@/core/app'
export default {
  name: "detail",
  components: {
    SlideImage,
    SkuPopup
  },
  data(){
    return {
      isLoading: true,
      // 显示/隐藏SKU弹窗
      showSkuPopup: false,
      skuMode:3,
      // 当前商品ID
      goodsId: null,
      userInfo: null,
      goods: {
        goods_images: [],
        goods_price_min: "",
        originalPrice: "",
        goods_name: "",
        specList:[],
        skuList:[],
        content:'',
      }
    }
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.userInfo = getUserInfo();
    console.log(this.userInfo)
    // 记录商品ID
    this.goodsId = parseInt(options.goodsId)
    // 加载页面数据
    this.onRefreshPage()
  },
  methods:{
    // 刷新页面数据
    onRefreshPage() {
      const app = this
      app.isLoading = true
      Promise.all([app.getGoodsDetail()])
          .finally(() => app.isLoading = false)
    },
    /**
     * 显示/隐藏SKU弹窗
     * @param {skuMode} 模式 1:都显示 2:只显示购物车 3:只显示立即购买
     */
    onShowSkuPopup(skuMode = 1) {
      this.skuMode = skuMode
      this.showSkuPopup = !this.showSkuPopup
    },
    getGoodsDetail(){
      return new Promise((resolve, reject) => {
        this.$request.get('wx/goods/detail', { id:this.goodsId}).then(({data}) => {

          const {info} = data;
          this.goods.id = info.id;
          this.goods.goods_price_min = info.retailPrice;
          this.goods.originalPrice = info.originalPrice;
          this.goods.goods_name = info.name;
          this.goods.goods_images = info.gallery.length == 0 ? [info.picUrl] : info.gallery;
          this.goods.content = this.formatRichText(info.detail);
          this.goods.specList = data.specificationList;
          this.goods.skuList = data.productList
          console.log(this.goods)
          resolve()
        }).catch(err=>{
          this.$toast(err.errmsg)
          reject()
        })
      })
    },
    //https://www.jianshu.com/p/8ba1f9d1454d
    formatRichText(html){
      let newContent= html.replace(/<img[^>]*>/gi,function(match,capture){
        match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
        match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
        match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
        return match;
      });
      newContent = newContent.replace(/style="[^"]+"/gi,function(match,capture){
        match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;');
        return match;
      });
      newContent = newContent.replace(/<br[^>]*\/>/gi, '');
      newContent = newContent.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;margin:0;"');
      return newContent;
    }
  }
}
</script>
<style scoped lang="scss">
@import "./detail.scss";
</style>